<template>
	<wd-toast />
	<wd-navbar title="接口权限管理" :bordered="false" placeholder safeAreaInsetTop right-text="添加" left-arrow
		@click-left="handleBack" @click-right="clickHeaderRight">

	</wd-navbar>
	<wd-action-sheet title="确认删除吗" cancel-text="取消" v-model="deleteMenusShow" :actions="deleteMenus"
		@select="deleteActive" />
	<view ref="filter" class="page-data-filter">

		<view class="drop-menu">
			<view class="list-where">
				<wd-drop-menu>
					<wd-drop-menu-item v-model="userTypeSelectValue" :options="userTypeOption" />
				</wd-drop-menu>
				<wd-drop-menu>
					<wd-drop-menu-item v-model="authStatusSelectValue" :options="authStatusOptions" />
				</wd-drop-menu>
				<wd-drop-menu>
					<wd-drop-menu-item v-model="userlistSortSelectValue" :options="listSortOption" />
				</wd-drop-menu>
			</view>
			<view class="list-sort">

			</view>
		</view>


	</view>

	<apiAuthList :list="Authlist" @click="clickDelete"></apiAuthList>
</template>

<script setup>
	import {
		useToast
	} from 'wot-design-uni'
	import apiAuthList from '../../components/api_auth_list/api_auth_list.vue'
	import overallRequest from "@/utool/http/http.js"
	import {
		reactive,
		ref,
		toRaw
	} from "vue"

	import {
		onReady
	} from "@dcloudio/uni-app"

	const toast = useToast()

	// 当前点击删除的权限ID
	const currentDleteId = ref(null)
	// 当前点击删除的权限Index
	const curretnDeleteIndex = ref(null)

	// 删除确认菜单显示状态
	const deleteMenusShow = ref(false)
	// 删除确认菜单项
	const deleteMenus = ref([{
		name: '删除',
		color: '#0083ff'
	}, ])
	// 删除确认回调
	function deleteActive(data) {
		let {
			index
		} = data
		Dlete_API_Auth(currentDleteId.value)
	}

	const authStatusSelectValue = ref(0)
	const authStatusOptions = ref([{
			label: '不限',
			value: 0
		},
		{
			label: '正常',
			value: 1
		},
		{
			label: '停用',
			value: 2
		}
	])

	const userTypeSelectValue = ref(0)
	const userTypeOption = ref([{
			label: '类型',
			value: 0
		},
		{
			label: 'GET',
			value: 1
		},
		{
			label: 'POST',
			value: 2
		},
		{
			label: 'UPDATE',
			value: 3
		},
		{
			label: 'DELETE',
			value: 4
		}
	])
	const userlistSortSelectValue = ref(0)
	const listSortOption = ref([{
			label: '综合排序',
			value: 0
		},
		{
			label: '最新创建在上',
			value: 1
		},
		{
			label: '最新创建在下',
			value: 2
		}
	])

	// 接口权限列表
	const Authlist = reactive([])

	let api = ref("/auth/PathList")

	onReady(() => {
		GET_API_Auth_List()
	})

	// 点击返回
	function handleBack() {
		uni.navigateBack({})
	}

	// 点击添加
	function clickHeaderRight() {
		uni.navigateTo({
			url: "/pages/Mange/Role/apiAuthList/add_api_auth"
		})
	}

	// 点击删除
	function clickDelete(item, index) {
		let {
			id
		} = item
		currentDleteId.value = id
		curretnDeleteIndex.value = index
		deleteMenusShow.value = true
	}
	// 获取列表数据
	function GET_API_Auth_List() {
		overallRequest(api.value).then(res => {
			let {
				page,
				limit,
				list,
				total
			} = res.data
			Authlist.push(...list)
		}).catch(err => {
			console.log(err);
		})
	}

	// 删除接口权限
	function Dlete_API_Auth(id) {

		let url = "/auth/removePath"

		overallRequest(url, {
			method: "POST",
			data: {
				id
			}
		}).then(res => {
			console.log(res);

			let {
				msg
			} = res

			toast.success(msg)

		}).catch(err => {
			console.log(err);
		})
	}
</script>

<style>
	.page-data-filter {
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #c3c3c344;
		padding: 0rpx 15rpx;
		padding-bottom: 0rpx;
		background: white;
	}

	.drop-menu {
		display: flex;
		padding: 0rpx 0rpx;
		padding-right: 30rpx;
	}

	.list-where {
		display: flex;
		gap: 18rpx;
	}

	.list-sort {
		flex: 1;
		display: flex;
		justify-content: flex-end;

	}

	.user-status-tabs {
		display: flex;
		gap: 20rpx;
		padding: 0rpx 20rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
	}

	.list-li {
		border-bottom: 1px solid #c3c3c344;
		padding: 20rpx;
	}

	.list-li:active {
		background: #c3c3c344;
	}
</style>